<template>
  <div class="menu">
    <div class="filter-menu">
      <div class="filter-item">
        <div class="filter-label">排序方式</div>
        <div class="filter-options">
          <a
            v-for="item in sortOptions"
            @click="selectSort(item.value)"
            :class="{ active: selectedSort === item.value }"
          >
            {{ item.label }}
          </a>
        </div>
      </div>

      <div class="filter-item">
        <div class="filter-label">类型</div>
        <div class="filter-options">
          <a
            @click="selectType(null)"
            :class="{ active: selectedType === null }"
          >
            全部
          </a>
          <a
            v-for="type in types"
            :key="type"
            @click="selectType(type.value)"
            :class="{ active: selectedType === type.value }"
          >
            {{ type.label }}
          </a>
        </div>
      </div>

      <div class="filter-item">
        <div class="filter-label">时间</div>
        <div class="filter-options">
          <a
            @click="selectYear(null)"
            :class="{ active: selectedYear === null }"
          >
            全部
          </a>
          <a
            @click="selectYear('更早')"
            :class="{ active: selectedYear === '更早' }"
          >
            更早
          </a>
          <a
            v-for="year in years"
            :key="year"
            @click="selectYear(year)"
            :class="{ active: selectedYear === year }"
          >
            {{ year }}
          </a>
        </div>
      </div>
    </div>

    <div v-if="videoItemList.length > 0">
      <div class="video-list">
        <div
          class="video-item"
          v-for="item in videoItemList"
        >
          <div class="video-container">
            <img
              :src="item.thumbnailUrl"
              alt="视频缩略图"
              @click="locateToVideo(item.id)"
            />

            <div class="video-container-info">
              <span class="play-count"
                ><PlayCircleOutlined /> {{ formatNumber(item.viewCount) }}</span
              >
            </div>
          </div>

          <a-button
            type="link"
            class="video-title"
            :title="item.title"
            @click="locateToVideo(item.id)"
          >
            <strong>{{ item.title }}</strong>
          </a-button>

          <a-button
            type="link"
            class="video-info"
            @click="locateToUserProfile(item.userId)"
          >
            <span
              class="video-author"
              :title="item.nickname"
            >
              {{ item.nickname }}
            </span>

            <span class="video-split"> - </span>

            <span class="video-date">
              {{ timeFormat(item.publishTime) }}
            </span>
          </a-button>
        </div>
      </div>

      <Pagination
        style="margin-top: 20px"
        v-model:page="queryParams.pageNo"
        v-model:limit="queryParams.pageSize"
        :total="total"
        @pagination="getVideoData"
      />
    </div>

    <div v-else>
      <a-empty />
    </div>
  </div>
</template>

<script setup lang="ts">
import { CvVideoMenuReqVO } from '@/types/menu'
import dayjs from 'dayjs'
import { CvVideoItemRespVO } from '@/types/global'
import { getVideoMenu } from '@/api/video'
import { PlayCircleOutlined } from '@ant-design/icons-vue'
import { PlatformDictDataRespVO } from '@/types/dict'
import { getDictList } from '@/api/dict'
import { sortOptions } from '@/utils/options'

const years = ref<Number[]>([])
const types = ref<PlatformDictDataRespVO>(<PlatformDictDataRespVO>[])

const queryParams = ref<CvVideoMenuReqVO>({
  pageNo: 1,
  pageSize: 10,
  type: '',
  year: '',
  sorted: 0
})

const videoItemList = ref<CvVideoItemRespVO[]>([])
const total = ref(0)

onMounted(async () => {
  await getVideoData()

  for (let i = 0; i < 5; i++) {
    years.value.unshift(new Date().getFullYear() - i)
  }

  types.value = await getDictList('cv_video_types')
})

/**
 * 获取视频数据
 */
const getVideoData = async () => {
  const res = await getVideoMenu(queryParams.value)
  videoItemList.value = res.list
  total.value = res.total
}

const selectedYear = ref<number | string | null>(null)
const selectedType = ref<string | null>(null)
const selectedSort = ref<number>(0)

/**
 * 选择年份
 */
const selectYear = (year: number | string | null) => {
  selectedYear.value = year
  queryParams.value.year = year
  getVideoData()
}

/**
 * 选择类型
 */
const selectType = (type: string | null) => {
  selectedType.value = type
  queryParams.value.type = type
  getVideoData()
}

/**
 * 选择排序方式
 */
const selectSort = (sort: number) => {
  selectedSort.value = sort
  queryParams.value.sorted = sort
  getVideoData()
}

/**
 * 时间格式化
 */
const timeFormat = (time: string) => {
  if (time) {
    return new dayjs(time).format('YYYY-MM-DD')
  }
  return '-'
}

/**
 * 跳转到视频页
 */
const locateToVideo = (videoId: number) => {
  window.open(`/video?videoId=${videoId}`)
}

/**
 * 跳转到用户个人页
 */
const locateToUserProfile = (userId: number) => {
  window.open(`/profile?userId=${userId}`)
}

/**
 * 播放量格式化
 */
const formatNumber = (num: number) => {
  if (!num) {
    return 0
  }

  if (num >= 1000 && num < 10000) {
    return (num / 1000).toFixed(1) + 'K'
  } else if (num >= 10000) {
    return (num / 10000).toFixed(1) + 'W'
  } else {
    return num.toString()
  }
}
</script>

<style scoped>
.filter-menu {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
  background-color: #f2f2f2;
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  margin-bottom: 20px;
}

.filter-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.filter-label {
  font-weight: bold;
}

.filter-options {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.filter-options a {
  cursor: pointer;
  padding: 5px 10px;
  color: #000;
  text-decoration: none;
  transition:
    color 0.3s,
    background-color 0.3s;
}

.filter-options a:hover {
  background-color: #f0f0f0;
}

.filter-options a.active {
  color: #52c41a;
}

.video-list {
  display: flex;
  flex-wrap: wrap;
}

.video-item {
  width: 18%;
  margin: 10px;
}

.video-item img {
  width: 100%;
  border-radius: 8px;
  height: 120px;
  cursor: pointer;
}

.video-title {
  font-size: 15px;
  padding: 0;
  color: #000000;
}

.video-info {
  font-size: 14px;
  padding: 0;
  color: #666;
  display: flex;
  align-items: center;
}

.video-info:hover {
  cursor: pointer;
}

.video-split {
  margin: 0 5px;
}

.video-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  cursor: pointer;
}

.video-container-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  font-size: 14px;
  font-weight: bold;
}

.play-count {
  padding: 5px;
}
</style>
